<template>
    <div class="UserAuthorityBox">
        <span class="pageName">权限管理 > 用户管理</span>

        <div class="searchBox">
            <div class="tableBtn">
                <el-button type="primary" @click="userTypeForm = true">新增</el-button>
                <el-button type="info" @click="delUserType">删除</el-button>
            </div>
        </div>


        <!-- 新增信息弹出框 -->
        <el-dialog title="新增信息" :visible.sync="userTypeForm" width="35%">
            <el-form :model="formData" :rules="rules" ref="formData" class="addForm">
                <el-form-item label="角色名" :label-width="formLabelWidth" prop="name">
                    <el-input v-model="formData.name" autocomplete="off" class="addInp" placeholder="请输入角色名"></el-input>
                </el-form-item>
                <el-form-item label="描述" :label-width="formLabelWidth" prop="des">
                    <el-select v-model="formData.des" placeholder="请选择描述">
                        <el-option label="超级管理员权限" value="超级管理员权限"></el-option>
                        <el-option label="管理员权限" value="管理员权限"></el-option>
                        <el-option label="用户权限" value="用户权限"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="addUserType('formData')">确 定</el-button>
                <el-button @click="cancelAddUserType('formData')">取 消</el-button>
            </div>
        </el-dialog>
        <!-- 修改信息 -->
        <el-dialog title="修改信息" :visible.sync="updateTypeForm" width="35%">
            <el-form :model="updateData" :rules="rules" ref="updateData" class="addForm">
                <el-form-item label="角色名" :label-width="formLabelWidth" prop="name">
                    <el-input v-model="updateData.name" autocomplete="off" class="addInp"
                        placeholder="请输入角色名"></el-input>
                </el-form-item>
                <el-form-item label="描述" :label-width="formLabelWidth" prop="des">
                    <el-select v-model="updateData.des" placeholder="请选择描述">
                        <el-option label="超级管理员权限" value="超级管理员权限"></el-option>
                        <el-option label="管理员权限" value="管理员权限"></el-option>
                        <el-option label="用户权限" value="用户权限"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="updateDataUserType('updateData')">确 定</el-button>
                <el-button @click="cancelUpdateDataUserType('updateData')">取 消</el-button>
            </div>
        </el-dialog>
        <!-- 权限 -->
        <el-dialog title="权限" :visible.sync="viewTypeForm" width="20%">
            <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll"
                @change="handleCheckAllChange">全选</el-checkbox>
            <el-checkbox-group v-model="checkedAuthority" @change="handleCheckedAuthorityChange">
                <el-checkbox v-for="item in authority" :label="item" :key="item">{{ item }}</el-checkbox>
            </el-checkbox-group>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="updateAuthority" :plain="true">确 定</el-button>
                <el-button @click="viewTypeForm = false">返 回</el-button>
            </div>
        </el-dialog>
        <div class="tableBox">
            <!-- 表格 -->
            <el-table ref="multipleTable" :data="userAuthorityList" tooltip-effect="dark"
                @selection-change="handleSelectionChange" border style="width: 98%;font-size: 14px;margin: auto;margin-left: 30px;"
                :header-cell-style="{
                    background: '#015478', color: '#fff'
                }">
                <el-table-column type="selection" align="center" width="50px"></el-table-column>
                <el-table-column prop="userId" label="序号" align="center">
                </el-table-column>
                <el-table-column prop="name" label="角色名" align="center">
                </el-table-column>
                <el-table-column prop="des" label="描述" align="center">
                </el-table-column>
                <el-table-column prop="createDate" label="创建时间" align="center">
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button @click="update(scope.row)" type="text"
                            style="color: #015478;font-size: 14px">修改</el-button>
                        <el-button @click="view(scope.row)" type="text"
                            style="color: #015478;font-size: 14px">权限</el-button>
                        <el-button @click="del(scope.row)" type="text"
                            style="color: #015478;font-size: 14px">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
const authorityOptions = ['用户管理','群组管理','直播管理','钱包管理','权限管理'];
export default {
    name: 'UserAuthority',
    data() {
        return {
            userAuthorityList: [],
            // 选中
            multipleSelection: [],
            delSelectionUserType: [],
            // 权限
            checkAll: false,
            checkedAuthority: [],
            authority: authorityOptions,
            isIndeterminate: true,

            // 新增
            formData: {
                name: '',
                des: '',
                createDate: '',
                authority: ''
            },
            // 修改
            updateData: {
                name: '',
                des: '',
                createDate: '',
                authority: ''
            },
            // 权限
            viewData: {
                userId: ''
            },
            rules: {
                name: [
                    { required: true, message: '请输入角色', trigger: ['blur', 'change'] }
                ],
                des: [
                    { required: true, message: '请输入描述', trigger: ['blur', 'change'] }
                ]
            },
            userTypeForm: false,
            updateTypeForm: false,
            viewTypeForm: false,
            formLabelWidth: '80px',
        }
    },
    methods: {
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        // 权限
        handleCheckAllChange(val) {
            this.checkedAuthority = val ? authorityOptions : [];
            this.isIndeterminate = false;
        },
        handleCheckedAuthorityChange(value) {
            let checkedCount = value.length;
            this.checkAll = checkedCount === this.authority.length;
            this.isIndeterminate = checkedCount > 0 && checkedCount < this.authority.length;
        },
        // 新增
        addUserType(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.userTypeForm = false;
                    this.$axios({
                        method: 'post',
                        url: this.$api.authority.addUserAuthorityList,
                        data: {
                            addUserTypeData: this.formData
                        }
                    })
                        .then(res => {
                            if (res.data == 'success') {
                                this.$axios.get(this.$api.authority.userAuthorityList)
                                    .then(res => {
                                        this.userAuthorityList = res.data;
                                    })
                                    .catch(err => {
                                        console.log(err);
                                    })
                                for (let key in this.formData) {
                                    this.formData[key] = ''
                                }
                                this.$refs[formName].resetFields();
                            }
                        })
                        .catch(err => {
                            console.log(err);
                        })
                } else {
                    return false
                }
            })
        },
        cancelAddUserType(formName) {
            this.userTypeForm = false
            for (let key in this.formData) {
                this.formData[key] = ''
            }
            this.$refs[formName].resetFields();
        },
        // 批量删除
        delUserType() {
            if (this.multipleSelection != '') {
                this.multipleSelection.forEach(item => {
                    this.delSelectionUserType.push(item.userId)
                })
                this.$confirm('是否继续?', '批量删除角色类型', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    center: true
                }).then(() => {
                    this.$axios({
                        method: 'get',
                        url: this.$api.authority.delSelectionUserAuthority,
                        params: {
                            delSelectionData: this.delSelectionUserType
                        }
                    })
                        .then(res => {
                            if (res.data == 'success') {
                                this.$axios.get(this.$api.authority.userAuthorityList)
                                    .then(res => {
                                        this.userAuthorityList = res.data;
                                    })
                                    .catch(err => {
                                        console.log(err);
                                    })
                                this.multipleSelection = []
                                this.delSelectionUserType = []
                            } else {
                                console.log('未选中');
                            }

                        })
                        .catch(err => {
                            console.log(err);
                        })
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            } else {
                this.$message({
                    showClose: true,
                    message: '请选择需要删除的角色类型！',
                    type: 'warning'
                })
            }
        },
        // 修改
        update(row) {
            this.updateData = { ...row }
            this.updateTypeForm = true
        },
        updateDataUserType(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.updateTypeForm = false;
                    this.$axios({
                        method: 'post',
                        url: this.$api.authority.updateUserAuthority,
                        data: {
                            updateUserTypeData: this.updateData
                        }
                    })
                        .then(res => {
                            if (res.data == 'success') {
                                this.$axios.get(this.$api.authority.userAuthorityList)
                                    .then(res => {
                                        this.userAuthorityList = res.data;
                                    })
                                    .catch(err => {
                                        console.log(err);
                                    })
                                this.$refs[formName].resetFields();
                            }
                        })
                        .catch(err => {
                            console.log(err);
                        })

                } else {
                    return false
                }
            })
        },
        cancelUpdateDataUserType(formName) {
            this.updateTypeForm = false
            for (let key in this.updateData) {
                this.updateData[key] = ''
            }
            this.$refs[formName].resetFields();
        },
        // 权限
        view(row) {
            this.viewTypeForm = true
            this.viewData.userId = row.userId
            this.checkedAuthority = row.authority.split(',')
        },
        updateAuthority() {
            this.viewTypeForm = false
            this.$axios({
                method: 'get',
                url: this.$api.authority.updateAuthority,
                params: {
                    updateAuthorityId: this.viewData.userId,
                    updateAuthority: this.checkedAuthority
                }
            })
                .then(res => {
                    if (res.data == 'success') {
                        this.$axios.get(this.$api.authority.userAuthorityList)
                            .then(res => {
                                this.userAuthorityList = res.data;
                            })
                            .catch(err => {
                                console.log(err);
                            })
                        this.$message({
                            type: 'success',
                            message: '修改成功!'
                        });
                        this.checkedAuthority = []
                    }
                })
                .catch(err => {
                    console.log(err);
                })
        },
        // 删除
        del(row) {
            this.$confirm('是否继续?', '删除该角色类型', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                center: true
            }).then(() => {
                this.$axios({
                    method: 'get',
                    url: this.$api.authority.delUserAuthority,
                    params: {
                        delUserId: row.userId
                    }
                })
                    .then(res => {
                        if (res.data == 'success') {
                            this.$axios.get(this.$api.authority.userAuthorityList)
                                .then(res => {
                                    this.userAuthorityList = res.data;
                                })
                                .catch(err => {
                                    console.log(err);
                                })
                        }
                    })
                    .catch(err => {
                        console.log(err);
                    })
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
    },
    created() {
        this.$axios.get(this.$api.authority.userAuthorityList)
            .then(res => {
                this.userAuthorityList = res.data;
            })
            .catch(err => {
                console.log(err);
            })
    }
}
</script>

<style scoped lang="less">
.UserAuthorityBox {
    display: flex;
    flex-direction: column;
}

.tableBtn {
    display: flex;
    flex: 1;
    justify-content: flex-end;
    padding: 0px 30px;
}

.el-form-item {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-left: 20px;
}

.addInp {
    width: 260px;
}

.addForm {
    /deep/ .el-form-item {
        margin-left: 0px;
    }
}

.addForm {
    /deep/ .el-form-item__content {
        margin-left: 10px !important;
    }
}

.styleA .el-upload--picture-card {
    width: 40px;
    height: 40px;
    line-height: 40px;
}

.styleB .el-upload--picture-card {
    display: none;
}

/deep/.el-dialog__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
/deep/ .el-checkbox-group{
    display: flex;
    flex-direction: column;
    margin: 10px 10px;
}
/deep/ .el-checkbox__label{
    font-size:16px
}
/deep/ .el-checkbox{
    margin-top: 10px;
    display: flex;
} 
</style>